iT邦幫忙

google map相關文章
共有 35 則文章

技術 在網頁上嵌入Google Map及設置圖釘的方法 (下)

接續上一篇使用iframe來實現這個功能,這一篇將介紹使用Vue的套件:vue3-google-map來完成嵌入地圖及設置圖釘。 在官方文件有提到,若要使用此套...

技術 在網頁上嵌入Google Map及設置圖釘的方法 (上)

前言最近在開發個人作品,剛好想要實現在網頁中放入Google Map及設置圖釘,所以花了一些時間查詢、研究,發現其實有很多的方法或套件都可以實現這個功能!在這邊...

技術 App Inventor 可以使用 Google Map

雖然 Google Map 要使用 Api 已要收費,但如果要做到路線規劃的功能可以用網頁方式去呈現如下說明: 1.位置傳感器組件:可以報告用戶的緯度、經度及當...

技術 Google Maps JavaScript API 工具|專案實作

串接地圖 JavaScript API 中雖然相較起來難度較高,不過官方文件寫的也很簡單易懂。 使用方式 1.宣告 HTML5 文件,將 JS CDN 引入檔案...

技術 Google Static Map Maker 靜態地圖 API 工具|專案實作

Google Static Map API 是將網頁上需要的地圖畫面,以靜態地圖圖片的方式顯示。優點 效能很好,因為只是一張圖片缺點 無法對圖片縮放、移動,只能...

技術 最簡單的 Google Maps 嵌入方式 | 專案實作

工具有許多種,不過隨著專案大小與需求不同,搭配適合的實作方式才能達到最佳效益,常見的 Google Maps 優缺點比較看這裡。此次的需求只要在地圖上呈現座標地...

技術 3 種常用的 Google Maps 嵌入方式

在網頁內嵌入地圖的需求時常會用到,以下三種是最常見的方法: Google Maps Embed API (內嵌網頁) Google Static Map...

鐵人賽 Mobile Development DAY 28
iOS Developer Learning Flutter 系列 第 28

技術 iOS Developer Learning Flutter. Lesson27 Map + Location

Andorid/Flutter的Dictionary也叫Map Today Preview 使用Flutter版Google Maps 跟 location(...

鐵人賽 Modern Web DAY 6

技術 [3-1] 打造你的美食地圖!用Here Maps API 秀出Google API餐廳資訊

本系列文章已出版實體書籍:「你的地圖會說話?WebGIS 與 JavaScript 的情感交織」(博碩文化)WebGIS啟蒙首選✖五家地圖API✖近百個程式範...

鐵人賽 Modern Web DAY 4

技術 [2-1] 點資料圖徵 X 瀏覽器定位 X 地址定位

本系列文章已出版實體書籍:「你的地圖會說話?WebGIS 與 JavaScript 的情感交織」(博碩文化)WebGIS啟蒙首選✖五家地圖API✖近百個程式範...

鐵人賽 自我挑戰組 DAY 30
Ruby菜鳥村村民遊記 系列 第 30

技術 遊記ep.30 Click ! Draw ! in Google村

今天讓我們繼續介紹昨天折線的部分,上個章節我們介紹到 Marker,會不會想著如果可以把 Marker 跟 Polyline 做結合呢?那我們今天就來這麼做吧!...

鐵人賽 自我挑戰組 DAY 29
Ruby菜鳥村村民遊記 系列 第 29

技術 遊記ep.29 polylines in Google村

鐵人賽也就30天,居然可以生兩次病 ... Orz最近還有專案在趕,頂著38.1度也是直接請醫生幫我注射,希望能快點恢復健康的狀態,也希望大家好好保重身體,健康...

鐵人賽 自我挑戰組 DAY 28
Ruby菜鳥村村民遊記 系列 第 28

技術 遊記ep.28 Marker labels in Google村

今天繼續來介紹,如何幫 Marker 做點美化~除了在 marker icon屬性設定,可以客制自己獨特的 icon 圖案: var image = 'http...

技術 如何提取Google Maps坐標

您是否曾經想過知道平方英里內有多少家餐廳,就能賺錢? 沒有免費的午餐,但是,如果您知道如何使用Google地圖,則可以提取並收集餐廳的GPS,並將其存儲在自己的...

鐵人賽 自我挑戰組 DAY 27
Ruby菜鳥村村民遊記 系列 第 27

技術 遊記ep.27 Remove / Delete Marker in Google村

昨天我們讓 marker 增添了動感不少,今天想再來多增加一些跟地圖的互動,先來看一下程式碼的部分: <!DOCTYPE html> <htm...

鐵人賽 自我挑戰組 DAY 26
Ruby菜鳥村村民遊記 系列 第 26

技術 遊記ep.26 舞い躍る ! Marker ! in Google村

經過前幾天累積,我們已經能夠讓 marker 隨意地出現在 Google Map 上,但總覺得光出現而已好像有點滿足不了人類的視覺~如果能讓 marker 動態...

鐵人賽 自我挑戰組 DAY 25
Ruby菜鳥村村民遊記 系列 第 25

技術 遊記ep.25 Control Zoom and Pan in Google村

今天想介紹一下控制 Google Map 的幾個因素~先來看看今天的程式碼: <!DOCTYPE html> <html> <...

鐵人賽 自我挑戰組 DAY 24
Ruby菜鳥村村民遊記 系列 第 24

技術 遊記ep.24 動態改變 in Google村

今天我們將介紹如何去觸發動態改變狀態,我們先來看一下完整的程式碼: <!DOCTYPE html> <html> <head&...

鐵人賽 自我挑戰組 DAY 23
Ruby菜鳥村村民遊記 系列 第 23

技術 遊記ep.23 SecretMessage in Google村

今天想介紹一個很有趣的東西,讓地圖幫我們留一段訊息~我們一樣先看整段程式碼再來解析: <!DOCTYPE html> <html>...

鐵人賽 Mobile Development DAY 22
iOS Developer Learning Android 系列 第 22

技術 iOS Developer Learning Android. Lesson 22 - Google Map (讀萬卷書、行萬里路)

⚠️⚠️⚠️跟MKMapView最大的不同就是,Google Map不是想用就可以用的,必須去申請金鑰 本日效果 實作步驟 去Gallery生一個Map A...

鐵人賽 自我挑戰組 DAY 22
Ruby菜鳥村村民遊記 系列 第 22

技術 遊記ep.22 Click and Marker in Google村

我們在 google map 上能隨意點擊一個座標點,前面的範例中我們都是去手動設定座標點,所以今天就配合昨天講過的事件觸發,來實際的實現這個功能: <!...

鐵人賽 自我挑戰組 DAY 21
Ruby菜鳥村村民遊記 系列 第 21

技術 遊記ep.21 Event in Google村

昨天講完地圖的種類,今天想介紹如何設定地圖的語言——在 Google 稱為 Localizing the Map <script src="ht...

鐵人賽 自我挑戰組 DAY 18
Ruby菜鳥村村民遊記 系列 第 18

技術 遊記ep.18 Geolocation! in Google村

今天因為時間關係,實在沒有辦法講得很詳細,請容我簡略帶過XD。 今天想帶來的是如何去定位你目前的位置(正確來說是你連上網路的主機的位置),我們先來看整體的程式碼...

鐵人賽 Modern Web
重新認識 JavaScript 系列 第 34

技術 重新認識 JavaScript 番外篇 (4) - 台灣街景封面產生器 with Google map 街景

本系列文章已重新編修,並在加入部分 ES6 新篇章後集結成書,有興趣的朋友可至天瓏書局選購,感謝大家支持。 購書連結 https://www.tenlong....

鐵人賽 Modern Web DAY 22
30天打造我的WebGIS 系列 第 22

技術 [Day 22] WebGIS中加入Google Directions導航API

前言 今天要來接Google路徑導航資訊,Google Maps API有很多很棒的東西可以用在WebGIS,路徑規劃就是其中之一,他的完整名稱是Directi...

鐵人賽 Modern Web DAY 14
30天打造我的WebGIS 系列 第 14

技術 [Day 14] WebGIS中的網格資料

前言 網格(raster)資料是指以規則網格的方式呈現空間資料,可能是長這樣: 上面是試圖以geojson模擬網格資料,網格間隔大概是一英里(1.6km),並且...

鐵人賽 Modern Web DAY 29

技術 {"29":"Geo+Gmp+導航+Places"}

再次回到,Google Map, 不是,是再次回到,Cordova Getolocation Plugin、Google Map、導航和Places的 結合。...

鐵人賽 Modern Web DAY 12

技術 {"12":"GEO&GMAP(定點導航)"}

Google MAPs Javascript API 還有一個功能就是「導航」,只是我需要的是,定點導航。因為目前工作上的需要,需要向我們的旅人,介紹在台東的景...